<div class="layui-fluid">
    <fieldset class="table-search-fieldset">
        <legend>搜索信息</legend>
        <div style="margin: 10px 10px 10px 10px">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">商品名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" class="layui-input" placeholder="请输入商品名称">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-primary" lay-submit="" lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                    </div>
                </div>
            </form>
        </div>
    </fieldset>

    <script type="text/html" id="goods-toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm save" data-title="添加商品" data-url="/goods/save"> 添加商品 </button>
        </div>
    </script>

    <table class="layui-hide" id="goods-list" lay-filter="goods-list"></table>

    <script type="text/html" id="goods_bar">
        <a class="layui-btn layui-btn-xs save" data-title="编辑" data-url="/goods/save" data-id="{{ d.id }}">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger delete" data-url="admin/goods/delete/id/{{ d.id }}">删除</a>
    </script>

</div>
{/block}

{block name="js"}
<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        var tableIns = table.render({
            elem: '#goods-list',
            url: layui.setter.API_HOST + '/admin/goods/index',
            toolbar: '#goods-toolbar',
            cols: [[
                {field: 'id', width: 80, title: 'ID', sort: true},
                {field: 'name', width: 220, title: '名称'},
                {field: '', width: 100, title: '分类', templet: function (res) {
                    return res.category.title;
                    }},
                {field: '', width: 110, title: '图片', templet: function (res) {
                        return '<img src="'+ res.images[0].min_image +'" style="max-width: 50px; max-height: 50px;" />'
                    }},
                {field: 'price', width: 100, title: '原价'},
                {field: 'market_price', width: 100, title: '市场价'},
                {field: 'sales', width: 100, title: '销量'},
                {field: '', width: 120, title: '状态', templet: function (res) {
                    if (res.status == 1) {
                        return '<input type="checkbox" checked="" data-id="'+res.id+'" lay-skin="switch" lay-filter="status" lay-text="上架中|已下架">'
                    } else {
                        return '<input type="checkbox" data-id="'+res.id+'" lay-skin="switch" lay-filter="status" lay-text="上架中|已下架">'
                    }

                }},
                {field: '', width: 120, title: '活动', templet: function (res) {
                    return '';
                    }},
                {field: 'sort', width: 150, title: '排序 - 从大到小', edit: 'text'},
                {field: 'create_time', width: 180, title: '添加时间'},
                {title: '操作', width:120, templet: '#goods_bar'}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            //执行搜索重载
            table.reload('goods-list', {
                page: {
                    curr: 1
                }
                , where: data.field
            });

            return false;
        });

        //监听单元格编辑
        table.on('edit(table)', function(obj){
            $.ajax({
                type: 'post',
                url: layui.setter.API_HOST + 'admin/goods/save_sort',
                data: {
                    id: obj.data.id,
                    value: obj.value
                },
                dataType: 'json',
                success: function (res) {
                    if(res.code === 0) {
                        layer.msg(res.msg, {icon: 1, time: 1000}, function () {
                            table.reload('table');
                        });
                    } else {
                        layer.msg('修改失败', {icon: 5});
                    }
                    console.log(res);
                }
            });
        });

        form.on('switch(status)', function(data){
            $.get(layui.setter.API_HOST + 'admin/goods/save_status', {id: $(this).data('id'), value: this.checked ? 1 : 0}).done(res => {
                layer.tips(res.msg, data.othis);
            });
        });
    });
</script>
{/block}
